<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>二维码解析器</title>
        <!-- <script src="https://cozmo.github.io/jsQR/jsQR.js"></script> -->
        <script src="js/jsQR.js"></script>
        <!-- <script src="https://cdn.tailwindcss.com"></script> -->
        <script src="css/3.4.16.css"></script>
        <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
        <link href="css/font-awesome.min.css" rel="stylesheet">
        
        <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"> -->
        <link href="css/all.min.css" rel="stylesheet">
        <script src="js/qrcode.min.js"></script>

        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: '#3B82F6',
                            secondary: '#64748B',
                            success: '#10B981',
                            danger: '#EF4444',
                            warning: '#F59E0B',
                            info: '#3B82F6',
                            light: '#F3F4F6',
                            dark: '#1F2937',
                            accent: '#F97316',
                            neutral: '#1E293B',
                        },
                        fontFamily: {
                            inter: ['Inter', 'sans-serif'],
                        },
                        maxWidth: {
                            'custom-md': '30rem', // 新增自定义 max-w 类
                        },
                    }
                }
            }
        </script>
        
        <style type="text/tailwindcss">
            @layer utilities {
                .content-auto {
                    content-visibility: auto;
                }
                .drop-shadow-custom {
                    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
                }
                .transition-custom {
                    transition: all 0.3s ease;
                }
            }
        </style>
    </head>
    <body class="bg-gray-50 font-inter min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white shadow-md sticky top-0 z-50">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-qrcode text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-gray-800">二维码解析器</h1>
                </div>
                <nav>
                    <ul class="hidden md:flex space-x-6">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-custom font-medium">首页</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-custom font-medium">使用指南</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-custom font-medium">关于我们</a></li>
                    </ul>
                    <button class="md:hidden text-gray-600 text-xl" id="menuBtn">
                        <i class="fa fa-bars"></i>
                    </button>
                </nav>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-grow container mx-auto px-4 py-8">
            <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 transform hover:scale-[1.01] transition-custom">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">上传二维码图片进行解析</h2>
                
                <!-- 拖放区域 -->
                <div id="dropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 cursor-pointer hover:border-primary transition-custom">
                    <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-4"></i>
                    <p class="text-gray-600 mb-2">拖放二维码图片到此处，或</p>
                    <label for="fileInput" class="inline-block bg-primary text-white py-2 px-4 rounded-lg cursor-pointer hover:bg-primary/90 transition-custom">
                        <i class="fa fa-folder-open mr-2"></i>选择图片文件
                    </label>
                    <input type="file" id="fileInput" accept="image/*" class="hidden">
                    <p class="text-xs text-gray-500 mt-2">支持 JPG, PNG, GIF 等常见图片格式</p>
                </div>
                
                <!-- 预览区域 -->
                <div id="previewContainer" class="hidden mb-6">
                    <h3 class="text-lg font-medium text-gray-800 mb-3">图片预览</h3>
                    <div class="border rounded-lg p-4 bg-gray-50">
                        <img id="imagePreview" class="max-w-full h-auto rounded-md shadow-sm" src="" alt="二维码预览">
                    </div>
                </div>
                
                <!-- 解析结果 -->
                <div id="resultContainer" class="hidden mb-6">
                    <h3 class="text-lg font-medium text-gray-800 mb-3">解析结果</h3>
                    <div class="relative">
                        <textarea id="resultTextarea" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" rows="4" readonly></textarea>
                        <button id="copyButton" class="absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-700 py-1 px-2 rounded transition-custom text-sm">
                            <i class="fa fa-copy mr-1"></i>复制
                        </button>
                    </div>
                    
                    <!-- URL跳转按钮 - 默认隐藏 -->
                    <div id="urlActionContainer" class="hidden mt-3 flex justify-end space-x-3">
                        <button id="openUrlButton" class="bg-success text-white py-2 px-4 rounded-lg shadow hover:shadow-md hover:bg-success/90 transition-custom flex items-center space-x-2">
                            <i class="fa fa-external-link mr-1"></i>打开链接
                        </button>
                        <button id="generateQRButton" class="bg-primary text-white py-2 px-4 rounded-lg shadow hover:shadow-md hover:bg-primary/90 transition-custom flex items-center space-x-2">
                            <i class="fa fa-qrcode mr-1"></i>生成二维码
                        </button>
                    </div>
                </div>
                
                <!-- 按钮区域 -->
                <div class="flex justify-center space-x-4">
                    <button id="parseButton" class="bg-primary text-white py-2 px-6 rounded-lg shadow-md hover:shadow-lg hover:bg-primary/90 transition-custom flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-qrcode mr-2"></i>解析二维码
                    </button>
                    <button id="resetButton" class="bg-gray-200 text-gray-700 py-2 px-6 rounded-lg shadow-md hover:shadow-lg hover:bg-gray-300 transition-custom flex items-center space-x-2">
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                </div>
            </section>
            
            <!-- 功能介绍 -->
            <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6 md:p-8">
                <h3 class="text-xl font-bold text-gray-800 mb-4">功能介绍</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-start space-x-3">
                        <div class="bg-primary/10 p-3 rounded-full">
                            <i class="fa fa-upload text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">文件上传</h4>
                            <p class="text-gray-600 text-sm">支持从本地选择图片文件进行二维码解析</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="bg-primary/10 p-3 rounded-full">
                            <i class="fa fa-paste text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">复制粘贴</h4>
                            <p class="text-gray-600 text-sm">直接从剪贴板粘贴图片进行解析，无需保存到本地</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="bg-primary/10 p-3 rounded-full">
                            <i class="fa fa-arrows text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">拖放功能</h4>
                            <p class="text-gray-600 text-sm">支持将图片文件直接拖放到指定区域进行解析</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="bg-primary/10 p-3 rounded-full">
                            <i class="fa fa-mobile text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">移动兼容</h4>
                            <p class="text-gray-600 text-sm">完全适配移动设备，在手机和平板上同样易用</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-800 text-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-bold mb-4">二维码解析器</h4>
                        <p class="text-gray-400">快速、准确地解析各种二维码内容</p>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition-custom">首页</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-custom">使用指南</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-custom">关于我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-envelope-o mr-2"></i>
                                <a href="mailto:contact@example.com" class="text-gray-400 hover:text-white transition-custom">contact@example.com</a>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-phone mr-2"></i>
                                <a href="tel:+8612345678901" class="text-gray-400 hover:text-white transition-custom">+86 123 4567 8901</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
                    <p>&copy; 2025 二维码解析器 - 保留所有权利</p>
                </div>
            </div>
        </footer>

        <!-- 通知提示 -->
        <div id="notification" class="fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center space-x-3 max-w-sm">
            <div id="notificationIcon" class="text-primary text-xl">
                <i class="fa fa-check-circle"></i>
            </div>
            <div>
                <h4 id="notificationTitle" class="font-medium text-gray-800">操作成功</h4>
                <p id="notificationMessage" class="text-sm text-gray-600">二维码已成功解析</p>
            </div>
            <button id="closeNotification" class="text-gray-400 hover:text-gray-600 ml-2">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <!-- 二维码生成模态框 -->
        <div id="qrcodeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl p-6 max-w-custom-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-800">生成二维码</h3>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="text-center mb-4">
                    <!-- <div id="generatedQRCode" class="inline-block p-4 bg-white border border-gray-200 rounded-lg"></div> -->
                    <canvas id="generatedQRCode" class="inline-block p-4 bg-white border border-gray-200 rounded-lg"></canvas>
                </div>
                <div class="flex justify-center space-x-3">
                    <button id="downloadQRPNG" class="bg-primary text-white py-2 px-4 rounded-lg shadow hover:shadow-md hover:bg-primary/90 transition-custom flex items-center space-x-2">
                        <i class="fa fa-download mr-1"></i>下载PNG
                    </button>
                    <button id="downloadQRSVG" class="bg-secondary text-white py-2 px-4 rounded-lg shadow hover:shadow-md hover:bg-secondary/90 transition-custom flex items-center space-x-2">
                        <i class="fa fa-download mr-1"></i>下载SVG
                    </button>
                    <button id="copyToClipboard" class="bg-accent text-white py-2 px-4 rounded-lg shadow hover:shadow-md hover:bg-accent/90 transition-custom flex items-center space-x-2">
                        <i class="fa fa-download mr-1"></i>复制到剪贴板
                    </button>
                </div>
            </div>
        </div>

        <script>
            // DOM 元素
            const dropArea = document.getElementById('dropArea');
            const fileInput = document.getElementById('fileInput');
            const imagePreview = document.getElementById('imagePreview');
            const previewContainer = document.getElementById('previewContainer');
            const resultTextarea = document.getElementById('resultTextarea');
            const resultContainer = document.getElementById('resultContainer');
            const parseButton = document.getElementById('parseButton');
            const resetButton = document.getElementById('resetButton');
            const copyButton = document.getElementById('copyButton');
            const notification = document.getElementById('notification');
            const notificationTitle = document.getElementById('notificationTitle');
            const notificationMessage = document.getElementById('notificationMessage');
            const notificationIcon = document.getElementById('notificationIcon');
            const closeNotification = document.getElementById('closeNotification');
            const urlActionContainer = document.getElementById('urlActionContainer');
            const openUrlButton = document.getElementById('openUrlButton');
            const generateQRButton = document.getElementById('generateQRButton');
            const qrcodeModal = document.getElementById('qrcodeModal');
            const modalContent = document.getElementById('modalContent');
            const closeModal = document.getElementById('closeModal');
            const generatedQRCode = document.getElementById('generatedQRCode');
            const downloadQRPNG = document.getElementById('downloadQRPNG');
            const downloadQRSVG = document.getElementById('downloadQRSVG');
                        
            // 当前选中的文件和解析结果
            let selectedFile = null;
            let parsedResult = null;
            
            // 拖放事件处理
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropArea.classList.add('border-primary');
                dropArea.classList.add('bg-primary/5');
            }
            
            function unhighlight() {
                dropArea.classList.remove('border-primary');
                dropArea.classList.remove('bg-primary/5');
            }
            
            dropArea.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                
                if (files.length > 0) {
                    handleFiles(files[0]);
                }
            }
            
            // 文件选择处理
            fileInput.addEventListener('change', (e) => {
                if (e.target.files.length > 0) {
                    handleFiles(e.target.files[0]);
                }
            });
            
            // 粘贴处理
            document.addEventListener('paste', (e) => {
                const items = e.clipboardData.items;
                for (let item of items) {
                    if (item.kind === 'file') {
                        const file = item.getAsFile();
                        handleFiles(file);
                        break;
                    }
                }
            });
            
            // 处理文件
            function handleFiles(file) {
                if (file.type.match('image.*')) {
                    selectedFile = file;
                    showPreview(file);
                    parseButton.disabled = false;
                    //文件后自动完成解析
                    parseQRCode()
                } else {
                    showNotification('错误', '请选择有效的图片文件', 'error');
                }
            }
            
            // 显示预览
            function showPreview(file) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    previewContainer.classList.remove('hidden');
                    resultContainer.classList.add('hidden');
                    urlActionContainer.classList.add('hidden');
                }
                
                reader.readAsDataURL(file);
            }
            
            // 解析二维码
            async function parseQRCode() {
                if (!selectedFile) return;
                
                try {
                    // 显示加载状态
                    parseButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>解析中...';
                    parseButton.disabled = true;
                    
                    const result = await decodeQRCode(selectedFile);
                    parsedResult = result;
                    
                    if (result) {
                        resultTextarea.value = result;
                        resultContainer.classList.remove('hidden');
                        
                        // 检查是否是URL
                        if (isValidUrl(result)) {
                            urlActionContainer.classList.remove('hidden');
                        } else {
                            urlActionContainer.classList.add('hidden');
                        }
                        
                        showNotification('成功', '二维码解析成功');
                        
                        // 自动滚动到结果区域
                        resultContainer.scrollIntoView({ behavior: 'smooth' });
                    } else {
                        showNotification('失败', '未能识别二维码', 'error');
                    }
                } catch (error) {
                    console.error('解析二维码时出错:', error);
                    showNotification('错误', '解析过程中发生错误', 'error');
                } finally {
                    // 恢复按钮状态
                    parseButton.innerHTML = '<i class="fa fa-qrcode mr-2"></i>解析二维码';
                    parseButton.disabled = false;
                }
            }
            
            // 解码二维码
            function decodeQRCode(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        const img = new Image();
                        
                        img.onload = function() {
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            
                            // 调整图片大小以提高性能
                            const MAX_WIDTH = 800;
                            const MAX_HEIGHT = 800;
                            let width = img.width;
                            let height = img.height;
                            
                            if (width > height) {
                                if (width > MAX_WIDTH) {
                                    height = height * (MAX_WIDTH / width);
                                    width = MAX_WIDTH;
                                }
                            } else {
                                if (height > MAX_HEIGHT) {
                                    width = width * (MAX_HEIGHT / height);
                                    height = MAX_HEIGHT;
                                }
                            }
                            
                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);
                            
                            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            
                            // 使用最新版jsQR进行解码
                            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                                inversionAttempts: "dontInvert",
                            });
                            
                            if (code) {
                                resolve(code.data);
                            } else {
                                // 尝试使用阈值处理（针对低对比度图像）
                                const thresholdedData = new Uint8ClampedArray(imageData.data.length);
                                
                                for (let i = 0; i < imageData.data.length; i += 4) {
                                    const gray = (imageData.data[i] * 0.299) + (imageData.data[i + 1] * 0.587) + (imageData.data[i + 2] * 0.114);
                                    thresholdedData[i] = thresholdedData[i + 1] = thresholdedData[i + 2] = gray > 128 ? 255 : 0;
                                    thresholdedData[i + 3] = imageData.data[i + 3];
                                }
                                
                                const thresholdedImageData = new ImageData(thresholdedData, imageData.width, imageData.height);
                                const codeThresholded = jsQR(thresholdedImageData.data, thresholdedImageData.width, thresholdedImageData.height, {
                                    inversionAttempts: "dontInvert",
                                });
                                
                                if (codeThresholded) {
                                    resolve(codeThresholded.data);
                                } else {
                                    resolve(null);
                                }
                            }
                        };
                        
                        img.onerror = function() {
                            reject(new Error('无法加载图片'));
                        };
                        
                        img.src = e.target.result;
                    };
                    
                    reader.onerror = function() {
                        reject(new Error('无法读取文件'));
                    };
                    
                    reader.readAsDataURL(file);
                });
            }
            
            // 检查是否是有效的URL
            function isValidUrl(url) {
                try {
                    new URL(url);
                    return true;
                } catch (error) {
                    return false;
                }
            }
            
            // 打开URL
            function openUrl() {
                if (parsedResult && isValidUrl(parsedResult)) {
                    window.open(parsedResult, '_blank');
                }
            }
            
            // 生成二维码
            function generateQR() {
                if (parsedResult && isValidUrl(parsedResult)) {
                    // 清空现有内容
                    generatedQRCode.innerHTML = '';
                    
                    // 生成新二维码
                    QRCode.toCanvas(generatedQRCode, parsedResult, {
                        width: 256,
                        margin: 1,
                        color: {
                            dark: "#000000",
                            light: "#ffffff"
                        }
                    }, (error) => {
                        if (error) {
                            console.error(error);
                            showNotification('错误', '生成二维码失败', 'error');
                        } else {
                            // 显示模态框
                            qrcodeModal.classList.remove('hidden');
                            setTimeout(() => {
                                modalContent.classList.remove('scale-95', 'opacity-0');
                                modalContent.classList.add('scale-100', 'opacity-100');
                            }, 10);
                        }
                    });
                }
            }
            
            // 关闭模态框
            function closeModalDialog() {
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    qrcodeModal.classList.add('hidden');
                }, 300);
            }
            
            // 下载PNG格式的二维码
            function downloadQRCodePNG() {
                try {
                    const canvas = generatedQRCode//.querySelector('canvas');
                    if (!canvas) throw new Error('找不到二维码Canvas元素');
                    
                    const url = canvas.toDataURL('image/png');
                    downloadURI(url, 'qrcode.png');
                    showNotification('成功', 'PNG格式二维码已下载');
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '下载失败: ' + error.message, 'error');
                }
            }
            
            // 下载SVG格式的二维码
            function downloadQRCodeSVG() {
                try {
                    if (!parsedResult) throw new Error('没有可生成的内容');
                    
                    // 使用QRCode.js的toSvg方法
                    QRCode.toString(parsedResult, {
                        type: 'svg',
                        width: 256,
                        margin: 1,
                        color: {
                            dark: "#000000",
                            light: "#ffffff"
                        }
                    }, (error, svgString) => {
                        if (error) {
                            console.error(error);
                            showNotification('错误', '生成SVG失败: ' + error.message, 'error');
                        } else {
                            const blob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
                            const url = URL.createObjectURL(blob);
                            downloadURI(url, 'qrcode.svg');
                            showNotification('成功', 'SVG格式二维码已下载');
                        }
                    });
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '下载失败: ' + error.message, 'error');
                }
            }
            
            // 复制结果到剪贴板
            function copyToClipboard() {
                if (resultTextarea.value) {
                    resultTextarea.select();
                    document.execCommand('copy');
                    showNotification('成功', '结果已复制到剪贴板');
                }
            }
            
            // 重置所有
            function resetAll() {
                selectedFile = null;
                parsedResult = null;
                fileInput.value = '';
                imagePreview.src = '';
                resultTextarea.value = '';
                previewContainer.classList.add('hidden');
                resultContainer.classList.add('hidden');
                urlActionContainer.classList.add('hidden');
                parseButton.disabled = true;
            }
            
            // 显示通知
            function showNotification(title, message, type = 'success') {
                notificationTitle.textContent = title;
                notificationMessage.textContent = message;
                
                // 设置图标和颜色
                if (type === 'success') {
                    notificationIcon.innerHTML = '<i class="fa fa-check-circle"></i>';
                    notificationIcon.className = 'text-success text-xl';
                } else if (type === 'error') {
                    notificationIcon.innerHTML = '<i class="fa fa-exclamation-circle"></i>';
                    notificationIcon.className = 'text-danger text-xl';
                } else if (type === 'warning') {
                    notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle"></i>';
                    notificationIcon.className = 'text-warning text-xl';
                }
                
                // 显示通知
                notification.classList.remove('translate-y-20', 'opacity-0');
                
                // 3秒后自动关闭
                setTimeout(() => {
                    closeNotificationFunc();
                }, 3000);
            }
            
            // 关闭通知
            function closeNotificationFunc() {
                notification.classList.add('translate-y-20', 'opacity-0');
            }
            
            // 辅助函数：下载URI
            function downloadURI(uri, name) {
                const link = document.createElement('a');
                link.download = name;
                link.href = uri;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
            
            // 事件监听器
            parseButton.addEventListener('click', parseQRCode);
            resetButton.addEventListener('click', resetAll);
            copyButton.addEventListener('click', copyToClipboard);
            closeNotification.addEventListener('click', closeNotification);
            openUrlButton.addEventListener('click', openUrl);
            generateQRButton.addEventListener('click', generateQR);
            closeModal.addEventListener('click', closeModalDialog);
            downloadQRPNG.addEventListener('click', downloadQRCodePNG);
            downloadQRSVG.addEventListener('click', downloadQRCodeSVG);
            
            // 复制到剪贴板
            document.getElementById('copyToClipboard').addEventListener('click', () => {
                try {
                    const canvas = generatedQRCode//document.querySelector('#qrcode');
                    canvas.toBlob((blob) => {
                        const items = [new ClipboardItem({'image/png': blob})];
                        navigator.clipboard.write(items).then(() => {
                            showNotification('成功', '二维码已复制到剪贴板');
                        }).catch((error) => {
                            console.error(error);
                            showNotification('错误', '复制失败，请重试', 'error');
                        });
                    });
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '复制失败，请重试', 'error');
                }
            });
            
            // 点击模态框背景关闭
            qrcodeModal.addEventListener('click', (e) => {
                if (e.target === qrcodeModal) {
                    closeModalDialog();
                }
            });
            
            // 点击拖放区域触发文件选择
            dropArea.addEventListener('click', () => {
                fileInput.click();
            });
            
            // 初始化
            resetAll();
        </script>
    </body>
    </html>
    